import React from "react";
import "../css/Computer.css";
import {connect} from "react-redux";
import {computerAction} from "../Redux/actions";

class Computer extends React.Component{
  constructor(props){
    super(props);

  }

  render(){
    return(
      <div className="computer_container">
        <input ref="first"/>
        <div>+</div>
        <input ref="second"/>
        <button onClick={()=>{
          var firstValue = Number(this.refs.first.value);
          var secondValue  = Number(this.refs.second.value);
          this.props.sumAction(computerAction(firstValue,secondValue))
        }}>=</button>
        <div>{this.props.sum}</div>
      </div>
    )
  }
}
function mapStateToProps(rootReducer){
  return{
    sum:rootReducer.computerReducer.sum
  }
}

function mapActionToProps(dispatch){
  return{
    sumAction:(action)=>{dispatch(action)}
  }
}

export default connect(mapStateToProps,mapActionToProps)(Computer);